<template>
	<view>
		<view class="navbar">
			<zbar></zbar>
			<view class="navbarcontent">
				<view class="nav_left" @click="pagesubscriber">
					<image src="../../static/user/u1.png" mode=""></image>
				</view>
				<view class="nav_left" @click="pagegzhong">
					<image src="../../static/user/gong.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="user">
			<view class="user_top" @click="pageUserinfo">
				<view class="">
					<view class="" v-if="islogin">
						<view class="uname">{{userinfo.nickName}}</view>
						<view style="width: 245rpx;" class="utime">在伊可库薅了
							<span>{{userinfo.registerDay}}</span>天
						</view>
					</view>
					<view class="" v-else>
						<view class="uname">请登录/注册</view>
						<view style="width: 105rpx;" class="utime">请登录</view>
					</view>
				</view>
				<view class="uimg" v-if="islogin">
					<image :src="userinfo.headImg?userinfo.headImg:'/static/toux.png'" mode=""></image>
				</view>
			</view>
			<view class="block_flex">
				<view class="its">
					<view class="">
						<image class="icon" src="../../static/user/u4.png" mode=""></image>
						<view class="">
							薅了<span>{{dataNum.orderCount}}</span>单
						</view>
					</view>
				</view>
				<view class="its">
					<view class="">
						<image class="icon" src="../../static/user/u5.png" mode=""></image>
						<view class="">
							减碳<span>{{dataNum.c |smartWeight}}</span>
							<text style="font-size: 20rpx;">CO2e</text>
						</view>
					</view>
				</view>
				<view class="its">
					<view class="">
						<image class="icon" src="../../static/user/u6.png" mode=""></image>
						<view class="">
							节省<span>{{dataNum.saveAmount}}</span>元
						</view>
					</view>
				</view>
			</view>
			<view class="k34">
				<view class="">
					<view class="kflexl">
						<view class="kflexl">
							<image src="/static/icon/ql.png" mode=""></image>
							<view class="">
								福利群
							</view>
						</view>
						<view class="lyh">
							领优惠
						</view>
					</view>
					<view class="test">
						加入福利群，领取超多优惠
					</view>
				</view>
				<view class="rimg">
					<image show-menu-by-longpress :src="imgInfo.kfCode" mode=""></image>
				</view>
			</view>
			<view class="ulist">
				<view class="item" v-for="(item,index) in ulist" :key="index" 
				@click="pagego(item,index)">
					<view class="flex_b">
						<image :src="item.icon" mode=""></image>
						<view class="flex_b">
							<view class="">
								{{item.uname}} 
							</view>
							<view class="tip" v-if="index==4 && count>0">
								{{count}}
							</view>
						</view>
					</view>
						<button v-if='index==7' open-type="contact"></button>
					    <image class="rig" src="/static/icon/r.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="loginout" v-if="islogin">
			退出登录
		</view>
		<view class="" style="height: 60rpx;"></view>
		<uv-tabbar :value="3" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		getUserInfo,customerMsg,customerData,getimg
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				ulist: [{
						uname: '我的订单',
						icon: require('../../static/user/u7.png'),
						path: '/pages/order/order'
					},
					{
						uname: '消费券',
						icon: require('../../static/user/u8.png'),
						path: '/mypage/consumer'
					},
					{
						uname: '礼品卡',
						icon: require('../../static/user/u9.png'),
						path: '/mypage/giftcard'
					},
					{
						uname: '评论和赞',
						icon: require('../../static/user/u10.png'),
						path: '/mypage/commentandz'
					},
					{
						uname: '站内消息',
						icon: require('../../static/user/u11.png'),
						path: '/mypage/message'
					},
					{
						uname: '邀请好友',
						icon: require('../../static/user/u12.png'),
						path: '/mypage/friend'
					},
					{
						uname: '联系我们',
						icon: require('../../static/user/u13.png'),
						path: '/mypage/contactus/contactus'
					},
					{
						uname: '在线客服',
						icon: require('../../static/user/u14.png'),
						path: ''
					},
					{
						uname: '区域代理',
						icon: require('../../static/user/u15.png'),
						path: '/mypage/proxy/index'
					}
				],
				islogin:false,
				userinfo:{},
				count:0,
				dataNum:{
					orderCount:0,
					c:0,
					saveAmount:0,
				},
				imgInfo:{}
			};
		},
		onLoad() {
			getimg({}).then(res=>{
				this.imgInfo = res.data
			})
		},
		onShow() {
			if(uni.getStorageSync('userToken')){
				this.islogin = true
				getUserInfo({}).then(res=>{
					if(res.code == 200){
						this.userinfo = res.data
						uni.setStorageSync('userInfo',res.data)
					}
				})
				customerMsg({}).then(res=>{
					if(res.code == 200){
						this.count = res.data
					}
				})
				customerData({}).then(res=>{
					if(res.code == 200){
						this.dataNum = res.data
					}
				})
			}else{
				this.islogin = false
			}
		},
		methods:{
			loginout(){
				uni.removeStorageSync('userToken')
				uni.setStorageSync('isHttp', false)
				uni.reLaunch({
					url:'/pages/index/index'
				})
				// uni.navigateTo({
				// 	url:'/pages/login/login'
				// })
				// uni.requestSubscribeMessage({
				//   tmplIds: ['8hP2pKBuGmGpqm-1dABYVNPLf-k31G4wol-dUi_gH1M'],
				//   success:(res=>{
				// 	  console.log(res);
				//   })
				// })
			},
			pagego(item,index){
				if(index == 0){
					if (uni.getStorageSync('userToken')) {
						uni.switchTab({
							url:item.path
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
				}else if(index==5){
					uni.navigateTo({
						url:item.path
					})
				}else{
					if (uni.getStorageSync('userToken')) {
						uni.navigateTo({
							url:item.path
						})
					} else {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			},
			pagegzhong(){
				uni.navigateTo({
					url:'/mypage/contactus/gzgzhong'
				})
			},
			pagesubscriber(){
				if (uni.getStorageSync('userToken')) {
					uni.navigateTo({
						url:'/mypage/subscriber'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				
			},
			pageUserinfo(){
				if (uni.getStorageSync('userToken')) {
					uni.navigateTo({
							url:'/mypage/userinfo'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBFBFB;
	}

	.navbar {
		padding: 0rpx 10px;
		box-sizing: border-box;
		background-color: #fff;
		position: sticky;
		top: 0%;
		z-index: 9;
		.navbarcontent {
			position: relative;
			height: 44px;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			.nav_left {
				display: flex;
				height: 44px;
				margin-right: 20rpx;
				image {
					width: 52rpx;
					height: 52rpx;
				}

			}

		}
	}

	.user {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;

		.user_top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.uname {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 52rpx;
				color: #000000;
			}

			.utime {
				background: #F3F3F3;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #000000;
				text-align: center;
				box-sizing: border-box;
				margin-top: 16rpx;

				span {
					font-family: 'DINB';
					font-size: 32rpx;
				}
			}

			.icon {
				margin-top: 6rpx;
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.uimg {
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 80rpx;
				}
			}
		}

		.block_flex {
			display: flex;
			justify-content: space-between;
			margin: 40rpx auto;

			.its {
				width: 230rpx;
				height: 216rpx;
				background: #F3F3F3;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;

				image {
					width: 118rpx;
					height: 118rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;

				span {
					font-family: 'FONE';
					font-size: 35rpx;
					color: #29A85C;
				}
			}
		}
		.ulist {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 28rpx;
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.rig {
					width: 40rpx;
					height: 40rpx;
				}
			}
			.item:nth-child(6){
				margin-top: 60rpx;
			}
			button{
				position: absolute;
				width: 710rpx;
				height: 60rpx;
				opacity: 0.1;
			}
			button::after{
				border: none;
			}
		}

	}

	.btn{
		width: 350rpx;
		height: 70rpx;
		border-radius:35rpx;
		border: 2rpx solid #D9D9D9;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #D9D9D9;
		text-align: center;
		line-height:70rpx ;
		margin: 30rpx auto;
	}
</style>